<template>
<div class="atd-group-management atd-page">
  <v-row class="atd-group-management__header">
    <v-col>
      <v-button @click="handleAddLightApp">{{$t('lightApp.buttons.add')}}</v-button>
    </v-col>
  </v-row>
  <div class="atd-group-management__table">
    <v-table :data="lightAppList" style="width: 100%">
      <v-table-column prop="name" :label="$t('lightApp.colmun.name')"></v-table-column>
      <v-table-column :label="$t('lightApp.colmun.action')" scope="scope">
        <template slot-scope="scope">
            <v-button type="text" small @click="handleEditLightApp(scope.row._id)">{{$t('lightApp.buttons.edit')}}</v-button>
            <v-button type="text" small @click="handleDelLightAppById(scope.row._id, scope.$index)">{{$t('lightApp.buttons.delete')}}</v-button>
          </template>
      </v-table-column>
    </v-table>
  </div>
  <div class="atd-group-management__pagination atd-pagination">
    <v-pagination v-if="total > pageSize"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
      ></v-pagination>
  </div>
</div>
</template>

<script>
import {
  getLightAppList,
  deleteLightAppById
} from '@/api/light_app';
import {
  fetchSuccess,
  fixScheduleTime,
  sessionStorage
} from '@/utils/tools';

import {
  PAGE_SIZE_BASE
} from '@/constants/common';
import storageKeys from '@/constants/storage';
import Emitter from '@/vuego/mixins/emitter';

export default {
  name: 'LightAppManagement',
  componentName: 'LightAppManagement',
  mixins: [Emitter],
  data() {
    return {
      query: '',
      currentPage: 1,
      pageSize: PAGE_SIZE_BASE,
      total: 0,
      lightAppList: [],
    };
  },
  mounted() {
    this.$on('logined', this.init);
    if (sessionStorage.has(storageKeys.user)) {
      this.init();
    }
  },
  methods: {
    init() {
      this.handleGetLightAppList();
    },
    handleGetLightAppList(page) {
      getLightAppList(page, this.pageSize, this.query)
        .then((res) => {
          if (fetchSuccess(res)) {
            this.lightAppList = res.results.list;
            this.total = res.results.total;
          }
        });
    },
    handleCurrentChange(page) {
      this.handleGetLightAppList(page);
    },
    handleAddLightApp() {
      this.$router.push({
        name: 'addLightApp',
      });
    },
    handleEditLightApp(id) {
      this.$router.push({
        name: 'editLightApp',
        params: {
          id,
        },
      });
    },
    handleDelLightAppById(id, index) {
      const title = this.$t('lightApp.dialog.del.title');
      const msg = this.$t('lightApp.dialog.del.message');
      const delSuccessMsg = this.$t('lightApp.dialog.del.success');
      this.$confirm(msg, title, {
          type: 'warn'
        })
        .then(() => deleteLightAppById(id))
        .then((res) => {
          if (fetchSuccess(res)) {
            this.$toast(delSuccessMsg);
            this.lightAppList.splice(index, 1);
          }
        });
    },
    // transformBlockList(list) {
    //   const findTypeName = (type) => {
    //     const types = getBlockTypes();
    //     return _.find(types, item => item.label === type).title;
    //   }
    //   _.forEach(list, (item) => {
    //     item.type = findTypeName(item.type);
    //   });
    //   return list;
    // }
  },
};
</script>

<style lang="less">
.atd-group-management {
    &__header {
        margin-bottom: 20px;
    }
    &__table {
        .shift-time {
            font-size: 13px;
            padding: 10px 0;
        }
    }
}
</style>
